<template>
	<div style="height: 550px;">
		<!-- 头部 -->
		<div class="tou1">
			<el-steps :active="3" finish-status="success" simple style="margin-top: 20px">
			  <el-step title="1 项目信息" ></el-step>
			  <el-step title="2 回报设置" ></el-step>
			  <el-step title="3 确认信息" ></el-step>
			  <el-step title="4 完成" ></el-step>
			</el-steps>
		</div>
		
		<!-- 中间 -->
		<div>
			<h3 style="font-weight:normal;color: #D1C2D8;">|-- 确认信息（请填写易付宝企业账号用于收款及身份核实）</h3>
			<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
			  <el-form-item>
				<h3>法人身份证号：</h3>
			    <el-input style="width: 25%;" @blur="selectIDCard()" v-model="formLabelAlign.IDCard"></el-input>
			  </el-form-item>
				
			  <el-form-item>
				<h3>支付宝企业账号：</h3>
			    <el-input style="width: 25%;" v-model="formLabelAlign.zhifubao"></el-input>
			  </el-form-item>
			   
			  <el-form-item>
				  <el-button type="primary" plain @click="wancheng()">提交</el-button>				  
			  </el-form-item>
				
			</el-form>
			
			<div class="queren_xx">
				<div style="position: relative;left: 60px;top: 50px;">
			     <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
				 <p style="position: relative;left: 50px;bottom: 50px;">支付宝账户名：{{this.formLabelAlign.zhifubao}}</p>
				 <p style="position: relative;left: 100px;">您正在使用该账号发起项目</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
	        labelPosition: 'right',
	        formLabelAlign: {
	          name: '',
	          zhifubao: '',
	          IDCard: ''
	        }
	      };
	    },
		methods:{
			async selectIDCard(){
				var userId = window.sessionStorage.getItem("userId")
				var param = new URLSearchParams();
				param.append("userId",parseInt(userId))
				param.append("IDCard",this.formLabelAlign.IDCard)
				if(this.formLabelAlign.IDCard.length==18){
					var res =await this.$http.post("selectIDCardByUserId",param);
					if(res.data.code==200){
						
					} else {
						this.$message.error(res.data.message)
					}
				}else{
					this.$message.error("身份证号需要填写18位数字/最后一位可以为字母！")
				}
				
			},
			async wancheng(){
				var projectId = window.sessionStorage.getItem("projectId")
				var param = new URLSearchParams();
				param.append("projectId",parseInt(projectId))
				param.append("zfbNumber",this.formLabelAlign.zhifubao)
				if(this.formLabelAlign.IDCard!=''&&this.formLabelAlign.zhifubao!=''){
					var res =await this.$http.post("updateZFBByProId",param);
					if(res.data.code==200){
						this.$message.success(res.data.message)
						this.$router.push('/wancheng')
					} else {
						this.$message.error(res.data.message)
					}
				}else{
					this.$message.error("数据有误或填写不完整，请检查！")
				}
				
			}
		}
	  }
</script>

<style>
	.queren_xx{
		width: 50%;
		height: 300px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 4px;
		position: relative;
		left: 40%;
		bottom: 330px;
	}
</style>
